<template>
  <div>
    <van-nav-bar
      title="课程分类"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="activeName" @click="onChoose">
      <van-tab title="职场提升" name="workLearn"></van-tab>
      <van-tab title="电商运营" name="shopWork"></van-tab>
      <van-tab title="语言学习" name="laugaue"></van-tab>
      <van-tab title="编程开发" name="code"></van-tab>
    </van-tabs>
    <transition name="classify">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      activeName: "workLearn",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    //导航点击事件，跳转至点击标签name对应的子路由
    onChoose(name) {
      this.$router.push("/classify/" + name);
    },
  },
  async mounted() {
    
    this.activeName = this.$route.path.slice(10)
  },
};
</script>

<style lang="scss" scoped>
.classify-enter-active{
  transition: all 1s ease-out;
}
 .classify-leave-active {
  transition: all .5s;
}
.classify-enter /* .fade-leave-active below version 2.1.8 */ {
  transform: scale(0.2)
}
 .classify-leave-to{
   transform: translateX(500px);
 }
</style>